<template>
  <view class="wrapper">

    <view scroll-y class="content">
      <technician-order v-show="currentTab == 0" ref="order"/>
      <technician-info v-show="currentTab == 1" ref="info"/>
    </view>
    <view class="tabs">
      <view class="tab" v-for="(tab,i) in tabs" :key="i" @click="handleTabClick(i)">
        <view class="tab-content" :class="{active:currentTab == i}">
          <image :src="tab.activeIcon" class="icon" v-if="currentTab == i"></image>
          <image :src="tab.icon" class="icon" v-else></image>
          <view class="name">{{ tab.title }}</view>
        </view>
      </view>

      <view class="scan" @click="handleScanClick">
        <text class="cuIcon-scan"></text>
        <view>扫码</view>
      </view>

    </view>
    <my-dialog content="你确定要开始服务吗？" ref="start" show-cancel/>
  </view>
</template>

<script>
import TechnicianInfo from "@/pages/index/my/technician/info";
import TechnicianOrder from "@/pages/index/my/technician/order/index";
import Api from "@/utils/Api";
import MyDialog from "@/components/dialog";

export default {
  name: "technician",
  components: {MyDialog, TechnicianOrder, TechnicianInfo},
  data() {
    return {
      currentTab: 0,
      userInfo: null,
      tabs: [
        {
          title: "订单",
          icon: "/static/img/qt/home_tab_1.png",
          activeIcon: "/static/img/qt/home_tab_1_1.png",
        },
        {
          title: "我的",
          icon: "/static/img/qt/home_tab_3.png",
          activeIcon: "/static/img/qt/home_tab_3_1.png",
        },
      ]
    }
  },
  methods: {
    handleTabClick(i) {
      this.currentTab = i;
    },
    handleScanClick() {
      uni.scanCode({
        onlyFromCamera: false,
        scanType: ['qrCode'],
        success: ({result}) => {
          this.$refs.start.show().then(() => {
            let data = JSON.parse(result)
            this.core.showLoading("核销中...")
            Api.startService(data.orderId).then(res => {
              uni.hideLoading();
              this.$toast("核销成功，请开始服务。");
              this.$refs.order.clear()
              this.$refs.order.getList();
            })
          })
        }
      })
    },

  },
  onShow() {
    uni.setNavigationBarTitle({title: "美业"})
  },
  onLoad(options) {
    options = this.core.decodeURIComponentObject(options);
    this.req.getUserInfoCheckMobile().then(res => {
      this.userInfo = res;
    })
  },
  onPullDownRefresh() {
    if (this.currentTab == 0)
      this.$refs.order._onPullDownRefresh();
    else
      this.$refs.info._onPullDownRefresh();
  },
  onReachBottom() {
    if (this.currentTab == 0)
      this.$refs.order._onReachBottom();
    // else
    //   this.$refs.info._onReachBottom();
  },
}
</script>

<style scoped lang='scss'>
.wrapper {
  width: 100%;
  display: flex;
  height: calc(100vh - var(--window-top));
  //margin-top: var(--window-top);
  flex-direction: column;

  .content {
    //flex: 1;
    //height: calc(100% - #{r(94px)} - env(safe-area-inset-bottom));
    //overflow: auto;
    padding-bottom: calc(#{r(120px)} + env(safe-area-inset-bottom));
  }

  .tabs {
    width: 100%;
    background-color: white;
    border-top: 1px solid rgb(#909090, .35);
    height: calc(#{r(94px)} + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    display: flex;
    position: fixed;
    bottom: 0;

    .tab {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;


      .tab-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: r(20px);

        &.active {
          color: $primary-color;
        }

        .icon {
          height: r(40px);
          width: r(40px);
        }
      }
    }

    .scan {
      position: absolute;
      left: calc(50% - #{r(70px)});
      top: r(-46px);
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      //border: 1px solid #eee;
      flex-direction: column;
      width: r(140px);
      height: r(140px);
      font-size: r(24px);

      .cuIcon-scan {
        height: r(92px);
        width: r(92px);
        background-color: $primary-color;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        font-size: r(50px);
      }
    }
  }
}
</style>